<template>
	<div class="inner-container">
		<ul class="operateList">
			<li class="operateBtn" @click="Show(true,0)"><img src="../../../assets/img/add.png" height="20" width="20" /><span class="operateTitle">新增</span></li>
			<li class="operateBtn" @click="Show(true,1)"><img src="../../../assets/img/eidt.png" height="20" width="20" /><span class="operateTitle">编辑</span></li>
			<li class="operateBtn" @click="DeleteData()"><img src="../../../assets/img/delete.png" height="20" width="20" /><span class="operateTitle">删除</span></li>
			<!-- <li class="operateBtn bigWidth" @click=""><img src="../../../assets/img/key.png" height="20" width="20" /><span class="operateTitle">角色权限</span></li> -->
			<li class="operateBtn bigWidth" @click="showRoleMenuPage(true)"><img src="../../../assets/img/key.png" height="20" width="20" /><span class="operateTitle">配置菜单</span></li>
		</ul>
		<queryFrom @Refresh="Refresh"></queryFrom>
		<div style="padding:3px 10px 0px 10px">
			<el-table :data="tableData" :height="tableHeight" class="table" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" height='700' border>
				<el-table-column type="index" label="序号" width="70" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="name" label="角色名称" min-width="50%" show-overflow-tooltip>
				</el-table-column>
				<!--   <el-table-column property="statusValue" :formatter="DataFormatter" label="是否启用" min-width="50%">
            </el-table-column> -->
				<el-table-column property="remark" label="备注" min-width="50%" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="createTime" label="创建时间" min-width="50%" show-overflow-tooltip>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="角色" @close="FormClose" v-model="dialogTableVisible">
			<from @Show="Show" :editData="editData" ref="form" @Refresh="Refresh"></from>
		</el-dialog>
		<el-dialog title="配置菜单" v-model="roleMenuPageState" top="5%">
			<setStaffMenu ref="roleMenuPage" :selectedRow="selectedRow" v-on:setMenu="saveRoleMenuSet" @Refresh="Refresh"></setStaffMenu>
		</el-dialog>
		<pageBox :totalNum="totalNum" @Refresh='Refresh'></pageBox>
	</div>
</template>
<script>
	import from from './form/Form.vue'
	import queryFrom from './form/QueryForm.vue'
	import pageBox from '../../Common/Page1.vue'
	import setStaffMenu from './form/SetRoleMenu.vue'
	export default {
		components: {
			from: from,
			queryFrom: queryFrom,
			pageBox: pageBox,
			setStaffMenu,
		},
		data() {
			return {
				tableData: null,
				selectedRow: null,
				dialogTableVisible: false,
				tableHeight: 600,
				pageInfo: {
					page: 1,
					pageSize: 16
				},
				queryInfo: {},
				totalNum: 0,
				editData: null,
				roleMenuPageState: false,
			}
		},
		mounted() {
			//分辨率宽度大于等于1920table高度自适应
			if($(window).width() >= 1920) {
				console.log($(window).height());
				//得到初始高度
				let wrapListHeight = $('.view').height(),
					warpBoxHigeht = $('.operateList').height(),
					iptHeight = $('.queryDiv').height();
				this.tableHeight = wrapListHeight - warpBoxHigeht - iptHeight - 80;
				//计算显示高度
				var timer = null;
				$(window).resize(() => {
					clearTimeout(timer)
					timer = setTimeout(() => {
						let wrapListHeight = $('.view').height(),
							warpBoxHigeht = $('.operateList').height(),
							iptHeight = $('.queryDiv').height();
						this.tableHeight = wrapListHeight - warpBoxHigeht - iptHeight - 80;
						console.log(wrapListHeight, warpBoxHigeht, iptHeight, this.tableHeight);
					}, 200)
				})
			} else {
				this.tableHeight = "";
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.selectedRow = val;
			},
			Show(showType, btnType) {
				if(btnType == 1) {
					if(this.selectedRow == null) {
						this.$message.error("请选择数据");
						return;
					}
					this.SetFormData();

				}
				this.dialogTableVisible = showType;
			},
			ShowMenu() {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				}
				if(this.$refs.setStaffMenu != undefined) {
					this.$refs.setStaffMenu.Refresh();
				}
			},
			Refresh(queryInfo) {
				if(queryInfo == undefined) {
					queryInfo = {};
				}
				queryInfo.current = this.pageInfo.page;
				queryInfo.size = this.pageInfo.pageSize;
				this.ajax({
					url: 'tSysRole/page',
					data: queryInfo,
					success: function(data) {
						this.tableData = data.records;
						if(data.total != this.totalNum) {
							this.totalNum = data.total;
						}
					}
				})
			},
			SetFormData() {
				console.log('tSysRole/selectRoleById?id=' + this.selectedRow.id)
				this.ajax({
					url: 'tSysRole/selectRoleById?id=' + this.selectedRow.id,
					success: function(data) {
						this.editData = data;
					}
				})
			},
			DeleteData() {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				} else {
					this.$confirm('是否删除数据？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.ajax({
							url: 'tSysRole/deleteRole',
							type: 'post',
							data: {
								id: this.selectedRow.id
							},
							success: function(data) {
								this.Refresh();
							}
						});
					}).catch(() => {

					});

				}
			},
			DataFormatter(row, column) {
				if(row.statusValue == null || row.statusValue != 1) {
					return "否";
				} else {
					return "是";
				}
			},
			showRoleMenuPage(showType) {
				//角色菜单配置
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				}
				this.roleMenuPageState = showType;

				setTimeout(() => {
					if(this.$refs.roleMenuPage != undefined && showType) {
						this.$refs.roleMenuPage.Refresh();
					}
				}, 500)

			},
			saveRoleMenuSet(menuIds, indenter) {
				var data = {
					mId: menuIds.join(','),
					rId: this.selectedRow.id
				}
				this.ajax({
					url: 'tSysRoleMenu/confRoleMenuBatch',
					type: 'post',
					data: data,
					success: function(data) {
						this.roleMenuPageState = false;
						this.data = [];
					}
				});
			},
			FormClose() {
				this.$refs.form.ClearData();
			}
		},
		watch: {},
		created() {
			this.Refresh();
		}

	}
</script>
<style scoped>
	.el-table__body-wrapper {
		overflow-x: hidden;
	}
	
	.operateList {
		width: 100%;
		height: 35px;
		border-bottom: 1px solid #eae9e9;
		font-size: 0;
	}
	
	.operateBtn {
		font-size: 14px;
		display: inline-block;
		vertical-align: top;
		height: 20px;
		line-height: 20px;
		border-right: 1px solid #ddd;
		padding: 0 10px;
		margin: 5px 0;
		text-align: center;
		cursor: pointer;
		color: #666;
	}
	
	.operateBtn:last-child {
		border-right: none;
	}
	
	.operateTitle {
		vertical-align: top;
		padding-left: 4px
	}
</style>